<template>
    <div>
        <el-row>
            <el-col :span="16" push="4">
                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="name"
                            label="书名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="author"
                            label="作者"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="价格">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="16" push="4">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-col>
        </el-row>
        <el-button type="primary" @click="toAddBook">addBook</el-button>
    </div>
</template>

<script>
    import {findBookPage} from "@/api";

    export default {
        name: "Books",
        data(){
            return {
                tableData:[],
                pageSizes: [5, 10, 15, 20],
                total: 0,
                currentPage: 1,
                pageSize: 5,
            }
        },
        created(){
            this.findBook(1,5)
        },
        methods:{
            handleSizeChange(val) {
                this.findBook(this.currentPage,val)
            },
            handleCurrentChange(val) {
                this.findBook(val,this.pageSize)
            },
            async findBook(currentPage,pageSize){
                let result =await findBookPage({pageNum:currentPage,pageSize:pageSize})
                this.tableData = result.data.content
                this.total = result.data.totalElements
                this.currentPage = result.data.pageable.pageNumber + 1
                this.pageSize = result.data.pageable.pageSize
            },
            toAddBook(){
                this.$router.push({
                    path: '/addBook',
                    name: 'addBook',
                    params:{
                        date: new Date().getTime()
                    }
                })
            },
            handleClick(row) {
                this.$router.push({
                    path: '/addBook',
                    name: 'addBook',
                    params:{
                        date: new Date().getTime(),
                        book: row
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
